<template>
  <div class="monitor-box">
    <topBar title="档案集约化全景平台" :show="true" />

    <div class="content">
      <div class="content-left">
        <div class="line-title">设备监控列表</div>
        <div class="left-content">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small">
            <i class="el-icon-search el-input__icon" slot="suffix"> </i>
          </el-input>

          <el-tree
            class="filter-tree"
            :data="data1"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="filterTree"
          >
          <span class="custom-tree-node" :class="data.class" slot-scope="{ node, data }">
            <span @click="shwoMonitor(data)">
                <i v-if="data.icon" :class="data.icon"></i>{{ node.label }}
            </span>              
        </span>
          </el-tree>
        </div>
      </div>
      <div class="content-right">
        <div class="right-title">智能档案库视频监控
          <i class="el-icon-s-grid icon-right" @click="showSquared"></i>
        </div>
        <div class="right-content" v-if="!bigViedoShow">
          <div v-for="(pic, index) in picArr" :key="index" class="pic-box">
            <img class='pic' :src="pic.src" alt="" @click="showBig(pic)">
            <div class="bottom-line">
              <div class="bottom-left">
                <span class="bottom-title">{{pic.title}}</span>
                <span>{{pic.time}}</span>
              </div>
              <div class="bottom-right">
                <i :class="pic.icon" />
              </div>
              
            </div>
          </div>
        </div>
        <div class="right-content" v-if="bigViedoShow">
          <div class="pic-box big-pic-box">
            
            <img class='pic' :src="bigViedoInfo.src" alt="">
            <div class="bottom-line">
              <div class="bottom-left">
                <span class="bottom-title">{{bigViedoInfo.title}}</span>
                <span>{{bigViedoInfo.time}}</span>
              </div>
              <div class="bottom-right">
                <i :class="bigViedoInfo.icon" />
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/topBar.vue";
import WebVideo from "./monitor.js";
let webVideo
export default {
  name: "monitor",
  components: {
    topBar,
  },
  watch: {
    filterText(val) {
      this.$refs.filterTree.filter(val);
    },
  },
  mounted() {
    webVideo = new WebVideo();

    webVideo.init();
webVideo.clickLogin();
  },
  data() {
    return {
      bigViedoShow: false,
      bigViedoInfo: {},
      picArr: [
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
          title: '监控1',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控2',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控23',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控4',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控5',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控6',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控7',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控8',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        {
          src:
            "https://img95.699pic.com/photo/50167/4549.jpg_wh860.jpg",
            title: '监控1',
          time: '2023-01-10 10:26:52',
          icon: 'el-icon-time'
        },
        
      ],
      filterText: "",
      data1: [
        {
          id: 1,
          label: "华南分行",
          class:'firstOne',
          icon: 'el-icon-plus',
          children: [
            {
              id: 101,
              label: "监控1",
              class:'el-icon-time',
              status: '在线'
            },
            {
              id: 102,
              label: "监控1",
              class:'el-icon-time',
              status: '在线'
            },
            {
              id: 103,
              label: "监控3",
              class:'el-icon-time',
              status: '在线'
            },
          ],
        },
        // {
        //   id: 2,
        //   label: "华年分行",
        //   class:'firstOne',
        //   icon: 'el-icon-plus',
        //   children: [
        //     {
        //       id: 201,
        //       label: "监控1",
        //       class:'el-icon-time',
        //       status: '在线'
        //     },
        //     {
        //       id: 202,
        //       label: "监控1",
        //       class:'el-icon-time',
        //       status: '在线'
        //     },
        //     {
        //       id: 203,
        //       label: "监控3",
        //       class:'el-icon-time',
        //       status: '在线'
        //     },
        //   ],
        // },
        // {
        //   id: 3,
        //   label: "南京分行",
        //   class:'firstOne',
        //   icon: 'el-icon-plus',
        //   children: [
        //     {
        //       id: 301,
        //       label: "监控1",
        //       class:'el-icon-time',
        //       status: '在线'
        //     },
        //     {
        //       id: 302,
        //       label: "监控1",
        //       class:'el-icon-time',
        //       status: '在线'
        //     },
        //     {
        //       id: 303,
        //       label: "监控3",
        //       class:'el-icon-time',
        //       status: '在线'
        //     },
        //   ],
        // },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    // 筛选监控列表
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 点击 右侧 展示对应监控画面 - 大的画面 - 键入相应的视频数据信息
    shwoMonitor(data) {
      console.log(data)

    },
    // 展示监控大画面
    showBig(item) {
      this.bigViedoShow = true
      this.bigViedoInfo = item
    },
    // 展示九宫格小监控画面
    showSquared() {
      this.bigViedoShow = false

    }
  },
};
</script>

<style scoped lang="scss">
.monitor-box {
  color: #fff;

  /* height: auto !important; */
  height: 100%;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background-color: #06164a;

  .content {
    height: calc(100% - 1.25rem);
    box-sizing: border-box;
    width: 96%;
    padding: 0.2rem 0;
    margin: 0 auto;
    display: flex;

    .content-left {
      border: 1px solid #1449a3;
      width: 20%;
      .left-content {
        padding: 20px;
      }
    }
    .content-right {
      flex: 1;
      /* height: calc(100% - 0.8rem); */
      height: 100%;
      background: url("../assets/image/mapBg.png") no-repeat top center;
      background-size: 98% 100%;

      .right-title {
        text-align: center;
        line-height: 0.6rem;
        font-size: 0.25rem;

        .icon-right {
          float: right;
          line-height: 0.6rem;
          margin: 0 1rem 0 0;
          font-size: 0.35rem;
          cursor: pointer;
        }
      }
      .right-content {
        margin: 0.25rem 0.3rem;
        height: calc(100% - 1.6rem);
        display: flex;
        flex-wrap: wrap;
        padding: 0.1rem 0 0 0.1rem;

        .pic-box {
          cursor: pointer;
          width: calc(33.33% - 0.1rem);
          height: calc(33.33% - 0.1rem);
          margin: 0 0.1rem 0.1rem 0;
          border: 1px solid #1449a3;
          .pic {
            width: 100%;
            height: 100%;
          }
          .bottom-line {
            background-color: rgba(0, 0, 0, 0.3);
            line-height: 0.35rem;
            position: relative;
            bottom: 0.35rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 15px 0 20px;
            opacity: 0;
            .bottom-title {
              margin-right: 15px;
            }
            .bottom-right {
              font-size: 0.2rem;
            }
          }
        }
        .pic-box:hover {
          .bottom-line {
            opacity: 1
          }
        }
        .big-pic-box {
          width: calc(100% - 0.1rem);
          height: calc(100% - 0.1rem);
        }
      }
    }
  }
}

.line-title {
  text-align: center;
  font-size: 0.22rem;
  padding: 0.051rem 0;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
  height: 0.4rem;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 88, 179, 0.99) 51%,
    rgba(0, 88, 179, 0) 100%
  );
}
</style>

<style lang="scss">
.el-input {
  background-color: transparent;
  margin-bottom: 20px;
  .el-input__inner {
    background-color: transparent;
    color: #fff;
  }
}


.left-content .el-tree {   
  background: transparent;    //将默认背景色进行透明处理
  color: #fff;
}
.left-content .el-tree-node__label {    
 font-size: 0.18rem;  //覆盖原有的字体大小
}  
.left-content .el-tree-node__content:hover {   
  background-color: #0056af;  //当鼠标浮动时，进行颜色改变，默认的为白色
} 
.left-content .el-tree-node:focus>.el-tree-node__content {    
 background-color: #0056af;  //当选中树节点时的颜色改变，默认为白色
}

/**/
</style>
